<template>
  <div class="course" style="display: flex;flex-wrap: wrap;justify-content: space-between">
    <div class="course_part" v-for="item in Info">
      <router-link to="">
        <div class="course_show">
          <img :src="item.picture" height="191" width="325"/>
        </div>
        <p><strong>{{item.name}}</strong></p>
      </router-link>
      <p><span>{{item.grade}}</span>
        <span>{{item.apparatus}}</span>
        <span>{{item.bodypart}}</span></p>
      <div class="shanchu">
        <el-button type="text" class="button">删除</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Usercord",
    data(){
      return{
        Info:{"img_url":require('../../../img/四足俯卧撑.png'),"name":"四足俯卧撑","grade":"低级","apparatus":"杠铃","bodypart":"前臂"}
      }
    },

    components:{
    },
    created() {
      var telephone=this.$store.state.telephone
      var this_=this
      this.$axios.get('http://127.0.0.1:8080/video_collect/video', {
        params: {
          telephone:telephone
        }
      })
        .then(function (response) {
          this_.Info=response.data
          console.log(this_.Info);
        })
        .catch(function (error) {
          console.log(error);
        });


    }
  }
</script>

<style scoped>
  .course_part{
    background: white;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: 0.5s;
  }
  .course_part .course_show:hover{
    box-shadow: 0px 0px 10px gray;
    /*transform: translate(0px,-5px);*/
  }
  a{
    text-decoration: none;
    color: black;
  }
  span{
    font-family: "SimHei";
  }
  .shanchu{
    float: right;
    margin-top: -25px;
  }
  .shanchu .button:hover{
    color: red;
  }
</style>
